<template>
	<!-- 基地列表 -->
	<view class="u-wrap">
		<view class="u-menu-wrap">
			<u-popup :show="cityShow" mode="left" @close="cityShowBtn(false)">
				<view style="height: 100%;">
					<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
						:scroll-top="scrollTop" indicatorBarWidth="200rpx">
						<view v-for="(item,index) in qaedaAreaList" :key="index" class="u-tab-item"
							:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
							@tap.stop="swichMenu(index)">
							<text class="u-line-1">{{item.name}}</text>
						</view>
					</scroll-view>
				</view>
			</u-popup>

			<!-- <block v-for="(item,index) in 20" :key="index"> -->
			<scroll-view scroll-y class="right-box" :refresher-threshold="100" refresher-enabled
						:refresher-triggered="isTriggeredbase" @refresherrefresh="reachTopbase">
				<view class="page-view" v-if="false">
					<view class="hot-content" v-for="(iitem, iindex) in qaedaList" :key="iindex"
						@click="onJump('/pagesPro/detail/baseDetail?id=' + iitem.id)">
						<view class="hot-img" v-if="iitem.main_product_app">
							<image class="" :src="iitem.main_product_app.url" mode="aspectFill"></image>
							<view class="hot-img-rl">
								<view class="">
									<view class="flex align-center padding-sm" style="background: #E1265D;height: 100%;"
										v-if="iitem.is_hot">
										<image class=""
											src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202309/7d3834f76c48dcd691f2e3fb4dea9f01.png"
											mode="aspectFill" style="width: 35rpx;height: 35rpx;"></image>
										<text class="margin-left-xs text-bold">推荐</text>
									</view>
								</view>
								<view class="flex padding-tb-sm">
									<view class="flex-a">
										<image src="/static/public/lv1.png" mode="" style="width: 32rpx;height: 32rpx;">
										</image>
										<text>{{iitem.trip_volume}}</text>
									</view>
									<view class="flex-a" style="margin-left: 30rpx;">
										<image src="/static/public/lv2.png" style="width: 32rpx;height: 32rpx;">
										</image>
										<text>{{iitem.pv}}</text>
									</view>
								</view>
							</view>
							<view class="monthBox" v-if="iitem.month">
								推荐：{{iitem.month}} 月
							</view>
						</view>
						<view class="hot-title">
							{{iitem.name}}
						</view>
						<view class="u-line-2 text-gray" v-if="item.brief_introduction" style="flex: 1;">
							{{item.brief_introduction}}
						</view>
						<view class="tag">
							<view style="flex-shrink: 0;" class=""
								:style="iiindex <= 2 ? 'display:block' : 'display:none' "
								v-for="(iiitem,iiindex) in iitem.special_label" :key="iiindex">
								<text>{{iiitem.title}}</text>
							</view>

						</view>
					</view>
					<u-empty mode="data" v-if="qaedaList.length == 0" icon="/static/empty.svg"
						text="暂无更多旅行产品"></u-empty>
				</view>
				<sojournlist :dataList='qaedaList'></sojournlist>
			</scroll-view>
			<!-- </block> -->
		</view>
	</view>
</template>

<script>
	import sojournlist from "@/components/sojournlist/index.vue";
	export default {
		components: {
			sojournlist
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			keyword: {
				type: String,
				default () {
					return ''
				}
			},
			cityShow:{
				type: Boolean,
				default () {
					return false;
				}
			},
			season_list:{
				type: Array,
				default () {
					return []
				}
			}
		},
		created() {
			// this.getQaedaAreaList()
		},
		data() {
			return {
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				qaedaList: [], //列表
				qaedaAreaList: [],
				show: true,
				isTriggeredbase: false, //基地下拉刷新停止
			};
		},
		methods: {
			// 基地下拉刷新
			async reachTopbase() {
				this.isTriggeredbase = true;
				await this.getQaedaList() //基地
				setTimeout(() => {
					this.isTriggeredbase = false;
				}, 1000)
			},
			getImg() {
				return Math.floor(Math.random() * 35);
			},
			// 点击左边的栏目切换
			async swichMenu(index) {
				if (index == this.current) return;
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;

				//获取基地详情
				this.getQaedaList(this.qaedaAreaList[index].id)
				this.cityShowBtn(false)
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			},
			//基地
			async getQaedaList(id = 0) {
				let season_list = this.season_list ? this.season_list.join(',') : ''
				let parm = {
					params: {
						area_id: id,
						keyword: this.keyword,
						season_list: season_list,
					}
				}
				this.qaedaList = await this.$httpApi.getQaedaList(parm);
			},
			//基地地区
			async getQaedaAreaList() {
				this.qaedaAreaList = await this.$httpApi.getQaedaArea();
				this.qaedaAreaList.unshift({
					id: 0,
					name: "全部"
				})
				if (this.qaedaAreaList.length > 0) {
					this.getQaedaList(this.qaedaAreaList[this.current].id);
				}
			},
			cityShowBtn(data){
				this.$emit('getCityShowFun',data)
			}

		}
	}
</script>
<style>
	.u-popup__content{
		height: 100% !important;
	}
</style>
<style lang="scss" scoped>
	
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */

		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 280rpx;
		flex-shrink: 0;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #E1265D;
		font-size: 36rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid red;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
		overflow: hidden;
	}

	.page-view {
		padding: 20rpx;
	}





	.hot-content {
		border: 2rpx solid #D8D8D8;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;

		.hot-img {
			position: relative;

			image {
				width: 100%;
				height: 324rpx;
			}

			.hot-img-rl {
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: space-between;
				align-content: center;
				color: #fff;
				width: 100%;
				padding: 0 20rpx 0 0;
				align-items: center;
				font-size: 28rpx;
				background: #0a0a0a7a;
			}

			.monthBox {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				display: flex;
				align-content: center;
				color: #fff;
				padding: 10rpx;
				align-items: center;
				font-size: 28rpx;
				background-color: #E1265D;
				border-radius: 30rpx;
			}
		}

		.hot-title {
			font-size: 42rpx;
			font-weight: bold;
			margin: 20rpx 0 20rpx 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			/*超出几行后省略号*/
			overflow: hidden;
		}

		.tag {
			display: flex;
			padding-left: 20rpx;
			overflow: hidden;

			view {
				border: 2rpx solid #cacaca;
				font-size: 30rpx;
				margin-right: 20rpx;
				color: #999999;
				padding: 4rpx 8rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>